{% extends "rules/base.html" %}
{% load bootstrap3 %}
{% block sidebar %}
    <div class="panel-heading">
        <h2 class="panel-title">Add a Source</h2>
    </div>
    {% if perms.rules.source_edit %}
        <div class="panel-heading">
            <h2 class="panel-title">Action</h2>
        </div>
        <ul class="action panel-body">
            <li>
                <a href="{% url "update_public_sources" %}">Update public sources</a>
            </li>
        </ul>
    {% endif %}
{% endblock sidebar %}
{% block content %}
   <div class="container-fluid">
       <div class="row toolbar-pf">
           <div class="col-sm-12">
               <div class="row toolbar-pf-results">
                   <div class="col-sm-12">
                       <h5>Select one of the {{ sources|length }} Source{{ sources|length|pluralize }}</h5>
                   </div>
                   <!-- /col -->
               </div>
               <!-- /row -->
           </div>
           <!-- /col -->
       </div>
       <!-- /row -->
   </div>
   <!-- /container -->
   <div class="container-fluid">
       <div class="list-group list-view-pf list-view-pf-view">
           {% for source, params in sources.items %}
               <div class="list-group-item">
                   <div class="list-group-item-header">
                       <div class="list-view-pf-expand">
                           <span class="fa fa-angle-right"></span>
                       </div>
                       <div class="list-view-pf-actions">
                           {% if not params.added %}
                               {% if perms.rules.source_edit %}
                                   <a class="add_source_button"
                                      name="{{ source }}"
                                      style="cursor: pointer;">
                                       <button class="btn btn-default">Enable</button>
                                   </a>
                               {% else %}
                                   <button class="btn btn-default" disabled>Available</button>
                               {% endif %}
                           {% else %}
                               <button class="btn btn-default" disabled>Enabled</button>
                           {% endif %}
                       </div>
                       <div class="list-view-pf-main-info">
                           <div class="list-view-pf-left">
                               <span class="fa fa-external-link list-view-pf-icon-sm"></span>
                           </div>
                           <div class="list-view-pf-body">
                               <div class="list-view-pf-description">
                                   <div class="list-group-item-heading">{{ source }}</div>
                                   <div class="list-group-item-text">{{ params.summary }}</div>
                               </div>
                               <div class="list-view-pf-additional-info">
                                   <div class="list-view-pf-additional-info-item">
                                       <span class="fa fa-list-alt"></span>
                                       License: {{ params.license }}
                                   </div>
                                   <div class="list-view-pf-additional-info-item">
                                       <span class="fa fa-shield"></span>
                                       Vendor: {{ params.vendor }}
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="list-group-item-container container-fluid hidden">
                       <div class="close">
                           <span class="pficon pficon-close"></span>
                       </div>
                       <div class="row">
                           <div class="col-md-6">
                               <dl class="dl-horizontal">
                                   {% if params.description %}
                                       <dt>
                                           Description
                                       </dt>
                                       <dd>
                                           {{ params.description }}
                                       </dd>
                                   {% endif %}
                                   <dt>
                                       Source URL
                                   </dt>
                                   <dd>
                                       {{ params.url }}
                                   </dd>
                                   {% if params.subscribe_url %}
                                       <dt>
                                           Subscribe URL
                                       </dt>
                                       <dd>
                                           <a href="{{ params.subscribe_url_cleaned }}">{{ params.subscribe_url }}</a>
                                       </dd>
                                   {% endif %}
                                   {% if params.support_url %}
                                       <dt>
                                           Support URL
                                       </dt>
                                       <dd>
                                           <a href="{{ params.support_url_cleaned }}">{{ params.support_url }}</a>
                                       </dd>
                                   {% endif %}
                               </dl>
                           </div>
                       </div>
                   </div>
               </div>
           {% endfor %}
       </div>
   </div>
   <!-- Modal -->
   <div class="modal bs-example-modal-sm"
        id="add_modal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="UpdateModalLabel">
       <div class="modal-dialog" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <h4 class="modal-title" id="UpdateModalLabel">
                       Add source
                       <span id="add_source_id"></span>
                   </h4>
               </div>
               <form class="form" action="{% url 'add_public_source' %}" method="post">
                   {% csrf_token %}
                   <div class="modal-body" id="update_text">
                       <input type="hidden" name="source_id" value="" />
                       <div class="form-group">
                           <label class="control-label" for="id_name">Name</label>
                           <input type="text"
                                  name="name"
                                  title=""
                                  required
                                  id="id_name"
                                  maxlength="100"
                                  placeholder="Name"
                                  class="form-control"/>
                       </div>
                       <div id="extra_params"></div>
                       <div class="form-group">
                           <label>
                               <input type="checkbox" name="untrusted" checked />
                               Supply chain attack protection
                           </label>
                           <p class="help-block">
                               Warning: If you uncheck the box then signatures can potentially modify the probe or run arbitrary code.
                           </p>
                       </div>
                       <div class="form-group">
                           <label>
                               <input type="checkbox" name="use_iprep" checked />
                               Use IP reputation for group signatures
                           </label>
                       </div>
                       <label class="control-label">Add source to the following ruleset(s)</label>
                       <div class="form-group">
                           <div id="id_rulesets">
                               <div class="checkbox">
                                   {% for ruleset in rulesets %}
                                       <label>
                                           <input type="checkbox" name="rulesets" value="{{ ruleset.pk }}" />
                                           {{ ruleset.name }}
                                       </label>
                                   {% endfor %}
                               </div>
                           </div>
                       </div>
                       <div class="form-group">
                           <label class="control-label" for="id_comment">Optional comment</label>
                           <textarea name="comment" rows="5" title="" cols="40" id="id_comment" placeholder="Optional comment" class="form-control"></textarea>
                       </div>
                   </div>
                   <div class="modal-footer">
                       <button class="btn btn-primary" type="submit">
                           <span class="glyphicon glyphicon-ok"></span>
                           Submit
                       </button>
                       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                   </div>
               </form>
           </div>
       </div>
   </div>
   <script>
  $(document).ready(function () {
    $('.add_source_button').click(
        function() {
           var source_id = $(this).attr('name')
           $("#add_source_id").text(source_id);
           $("input[name=source_id]").val(source_id);
           $.ajax({
                url: "{% url 'add_public_source' %}",
                type: 'GET',
                success: function(data) {
                    var source = data[source_id];
                    if (('parameters' in source) && ('secret_code' in source['parameters']))  {
                        if ($("#secret_code_div").length == 0) {
                        $("#extra_params").append(
                            `<div id="secret_code_div" class="form-group">
                            <label class="control-label" for="id_secret_code">Secret code</label>
                            <input type="text" name="secret_code" title="" required id="id_secret_code" maxlength="100" placeholder="Secret code" class="form-control" /></div>`
                        );
                        }
                    } else {
                        $("#secret_code_div").remove();
                    }
                    let max_size = 100 - '...'.length;
                    let summary = source['summary'];
                    if(summary.length > max_size) {
                        summary = `${summary.substring(0, max_size)}...`;
                    }
                    $("input[name=name]").val(summary);
                    $("#add_modal").modal('show');
                    console.log($("#add_modal"));
                }
             }
           )
        }
    )
    // toggle dropdown menu
    $('.list-view-pf-actions').on('show.bs.dropdown', function () {
      var $this = $(this);
      var $dropdown = $this.find('.dropdown');
      var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
      $dropdown.toggleClass('dropup', space < 10);
    });

    // click the list-view heading then expand a row
    $(".list-group-item-header").click(function(event){
      if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
        $(this).find(".fa-angle-right").toggleClass("fa-angle-down")
          .end().parent().toggleClass("list-view-pf-expand-active")
            .find(".list-group-item-container").toggleClass("hidden");
      } else {
      }
    })

    // click the close button, hide the expand row and remove the active status
    $(".list-group-item-container .close").on("click", function (){
      $(this).parent().addClass("hidden")
        .parent().removeClass("list-view-pf-expand-active")
          .find(".fa-angle-right").removeClass("fa-angle-down");
    })

  });
    </script>
{% endblock content %}
